import React, { useState, useEffect } from "react";
import axios from "axios";
import moment from "moment";
import { useParams } from "react-router";
import { Descriptions } from "antd";

// import style from "./News.moudle.css";
export default function NewsAdd(props) {
  const params = useParams();
  const [newInfo, setnewInfo] = useState(null);
  const auditList = ["未审核", "审核中", "已通过", "未通过"];
  const publishList = ["未发布", "待发布", "已上线", "已下线"];
  useEffect(() => {
    axios
      .get(`/news/${params.id}?_expand=category&_expand=role`)
      .then((res) => {
        setnewInfo(res.data);
      });
  }, [params.id]);
  const createMarkup = () => {
    return { __html: newInfo.content };
  };
  return (
    <div>
      {newInfo && (
        <div>
          <h1 style={{ fontWeight: "bold" }}>
            <span
              onClick={() => {
                window.history.back();
              }}
            >
              {"<"}
            </span>
            {/* {newInfo?.title} */}
            {newInfo.title}
          </h1>
          <div style={{ marginTop: "50px" }}>
            <Descriptions>
              <Descriptions.Item label="创建者">
                {newInfo.author}
              </Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {moment(newInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}
              </Descriptions.Item>
              <Descriptions.Item label="发布时间">
                {newInfo.publishTime
                  ? moment(newInfo.createTime).format("YYYY/MM/DD HH:mm:ss")
                  : "-"}
              </Descriptions.Item>
              <Descriptions.Item label="类别">
                {" "}
                {newInfo.category.title}
              </Descriptions.Item>
              <Descriptions.Item label="区域">
                {newInfo.region}
              </Descriptions.Item>
              <Descriptions.Item label="审核状态">
                {auditList[newInfo.auditState]}
              </Descriptions.Item>
              <Descriptions.Item label="发布状态">
                {publishList[newInfo.publishState]}
              </Descriptions.Item>
              <Descriptions.Item label="访问数量">
                {newInfo.view}
              </Descriptions.Item>
              <Descriptions.Item label="点赞数量">
                {newInfo.start}
              </Descriptions.Item>
              <Descriptions.Item label="评论数量">0</Descriptions.Item>
            </Descriptions>
          </div>

          <div dangerouslySetInnerHTML={createMarkup()}></div>
        </div>
      )}
    </div>
  );
}
